<script setup>
	import {
		ref,
		watch,
		watchEffect
	} from 'vue';

	const person = ref({
		name: "张三",
		age: 23
	})

	// watch(() => person.value.name, (newValue) => {
	// 	console.log(newValue)
	// })

	// 深度
	watch(person, (newValue) => {
		console.log(newValue);
	}, {
		deep: true,
		immediate: true
	})
	
	const firstName = ref("ABC")
	const lastName = ref("EF")
	const fullName = ref()
	// 监听两个
	// watch([firstName, lastName], ([NfirstName, NlastName], [OfirstName, OlastName]) => {
	// console.log(NfirstName, NlastName)
	// })
	//分开监听（建议
	// watch(firstName, (NfirstName, OfirstName) => {
	// 	console.log(NfirstName)
	// })
	watchEffect(()=>{
		console.log(firstName.value,lastName.value)
	})
</script>
<template>
	<view class="out">
		<input type="text" v-model="person.name" />
	</view>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入名..." />
		<input type="text" v-model="lastName" placeholder="请输入姓..." />
	</view>
</template>
<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative; //相对定位

		input {
			border: 1px solid #000000;
			height: 40px;
			background-color: white;
			position: relative;
			z-index: 2; //层级为2，高
			padding: 0 10px;
			margin-top: 10px;
		}
	}
</style>